<template>
  <div class="left">
    <div
      class="item"
      v-for="(item, index) in list"
      :key="item.id"
      :class="{ on: curIndex === index }"
      @mousedown="power ? $emit('update:curIndex', index) : ''"
      @mouseup="power ? $emit('update:curIndex', -1) : ''"
      @mouseleave="$emit('update:curIndex', -1)"
    >{{ item.keyTrigger }}</div>
  </div>
</template>

<script>
export default {
  props: ['list', 'curIndex', 'power']
}
</script>

<style lang="scss" scoped>
.left {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  grid-template-rows: 120px 120px 120px;
  column-gap: 10px;
  row-gap: 10px;
  margin-left: 40px;

  .item {
    text-align: center;
    line-height: 120px;
    border-radius: 12px;
    background: linear-gradient(#f5f5f5, #e0e0e0 99%, #fff 99%, #fff 100%);
    box-shadow: 4px 4px 3px rgba($color: #000000, $alpha: 0.4);
    border: 1px solid #ccc;
    user-select: none;
    cursor: pointer;
    text-shadow: 3px 3px 1px rgba($color: #000000, $alpha: 0.4);

    &:hover {
      background: #f5f5f5;
    }

    &.on {
      background: tomato;
      box-shadow: inset 4px 4px 3px rgba($color: #000000, $alpha: 0.6);
      border-color: rgb(0, 0, 0);
      color: #fff;
      text-shadow: 3px 3px 1px rgba($color: #000000, $alpha: 0.6);
    }
  }
}
</style>
